<template>
  <view class="chat-container">
    <!-- 顶部标题栏 -->
    <view class="chat-header">
      <view class="header-left" @click="goBack">
        <uni-icons type="arrowleft" size="24" color="#333"></uni-icons>
      </view>
      <view class="header-center">
        <text class="title">AI助手</text>
        <!-- <text class="status">在线</text> -->
      </view>
      <view class="header-right">
        <uni-icons type="more" size="24" color="#333"></uni-icons>
      </view>
    </view>
    
   <!-- 聊天内容区域 -->
      <scroll-view  class="chat-content"   scroll-y >
        <view 
          v-for="(item, index) in messageList" 
          :key="index"
          class="message-container"
        >
          <!-- 居中时间显示 -->
          <view class="message-time">{{ item.time }}</view>
          
          <view class="message-item" :class="item.type">
            <!-- 客服消息头像在左 -->
            <image 
              v-if="item.type === 'service'" 
              class="avatar" 
              :src="serviceAvatar"
            ></image>
            
            <!-- 消息内容 -->
            <view class="message-bubble">
              <text class="message-text">{{ item.content }}</text>
            </view>
            
            <!-- 用户消息头像在右 -->
            <image 
              v-if="item.type === 'customer'" 
              class="avatar" 
              :src="userAvatar"
            ></image>
          </view>
        </view>
      </scroll-view>
    
    <!-- 底部输入区域 -->
    <view class="chat-footer">
    <view class="input-area">
          <input 
            class="input" 
            v-model="inputMessage" 
            placeholder="请输入..." 
            @confirm="sendMessage"
            confirm-type="send"
            placeholder-style="color: #999;"
          />
          
          <view class="action-buttons">
            <button 
              v-if="inputMessage"
              class="send-btn"
              @click="sendMessage"
            >
              发送
            </button>
           
            
            <!-- 修改后的更多功能按钮 -->
            <button 
              class="more-btn"
              @click="showMoreFunc"
            >
              <text class="icon">+</text>
            </button>
          </view>
        </view>

      
      <!-- 更多功能面板 -->
      <view class="more-func-panel" v-if="showMorePanel">
        <view class="func-item" @click="sendImage">
          <view class="func-icon">
            <uni-icons type="image" size="24" color="#666"></uni-icons>
          </view>
          <text class="func-text">图片</text>
        </view>
        <view class="func-item" @click="sendFile">
          <view class="func-icon">
            <uni-icons type="paperclip" size="24" color="#666"></uni-icons>
          </view>
          <text class="func-text">文件</text>
        </view>
        <view class="func-item" @click="sendEmoji">
          <view class="func-icon">
            <uni-icons type="smile" size="24" color="#666"></uni-icons>
          </view>
          <text class="func-text">表情</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userAvatar: '/static/shouye1.png',
      serviceAvatar: '/static/shouye1.png',
      inputMessage: '',
      messageList: [
        {
          type: 'service',
          content: '您好，请问有什么可以帮您？',
          time: '10:30'
        },
        {
          type: 'customer',
          content: '我想咨询一下产品的使用方法',
          time: '10:32'
        },
        {
          type: 'service',
          content: '很高兴为您服务，请问您遇到什么问题了呢？',
          time: '10:33'
        }
      ],
      showMorePanel: false
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    sendMessage() {
      if (!this.inputMessage.trim()) return
      
      const newMsg = {
        type: 'customer',
        content: this.inputMessage,
        time: this.getCurrentTime()
      }
      
      this.messageList.push(newMsg)
      this.inputMessage = ''
      
      setTimeout(() => {
        this.messageList.push({
          type: 'service',
          content: '已收到您的消息，我们会尽快为您解答',
          time: this.getCurrentTime()
        })
      }, 1000)
    },
    getCurrentTime() {
      const now = new Date()
      return `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`
    },
    showMoreFunc() {
      this.showMorePanel = !this.showMorePanel
    },
    sendImage() {
      uni.chooseImage({
        count: 1,
        success: (res) => {
          this.messageList.push({
            type: 'customer',
            content: '[图片]',
            image: res.tempFilePaths[0],
            time: this.getCurrentTime()
          })
          this.showMorePanel = false
        }
      })
    },
    sendFile() {
      uni.chooseFile({
        count: 1,
        success: (res) => {
          this.messageList.push({
            type: 'customer',
            content: '[文件]',
            file: res.tempFiles[0],
            time: this.getCurrentTime()
          })
          this.showMorePanel = false
        }
      })
    },
    sendEmoji() {
      this.showMorePanel = false
    },
    startRecord() {
      uni.showToast({
        title: '开始录音',
        icon: 'none'
      })
    }
  }
}
</script>

<style lang="scss">
	@import url("AiChat.scss");
</style>